<template>
	<!-- 顶部导航栏 -->
	<view class="nav-bar">
		<view
			class="nav-bar__left"
			@click="onLeftClick"
			v-if="leftArrow || leftText"
		>
			<view class="nav-bar__text-icon arrow-left" v-if="leftArrow"></view>

			<view class="nav-bar__text" v-if="leftText">
				{{ leftText || '返回' }}
			</view>
		</view>

		<view class="nav-bar__title text-one"> {{ title || '' }} </view>

		<view class="nav-bar__right" @tap="onRightClick">
			<!-- <view class="nav-bar__right-icon more-icon" v-if="rightMore"></view> -->

			<view class="nav-bar__right-text" v-if="rightText">
				{{ rightText }}
			</view>
			<slot name="right"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: "",
				required: true,
			},
			rightText: {
				type: String,
				default: "",
			},
			leftText: {
				type: String,
				default: "",
			},
			leftArrow: {
				type: Boolean,
				default: false,
			},
			rightMore: {
				type: Boolean,
				default: false,
			},
		},
		methods: {
			onLeftClick() {
				this.$emit("click-left");
			},
			onRightClick() {
				this.$emit("click-right");
			},
		},
	};
</script>

<style lang="scss">
	@import "./scss/navbar.scss";
</style>
